<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.css">
    <link rel="stylesheet" href="./assets/css/home.css">
    <link rel="stylesheet" href="./assets/css/bootstrap-icons.css">
</head>
<body>
<div class="header">
    <div class="container">
        <div class="search">
            <div class="search-category">
                <span>站内</span>
                <span>常用</span>
                <span>搜索</span>
                <span>工具</span>
                <span>社区</span>
                <span>生活</span>
                <span>求职</span>
                <div class="line"></div>
            </div>
            <div class="search-box">
                <input type="text" placeholder="站内搜索关键字">
                <i class="bi-search icon"></i>
            </div>
        </div>
    </div>
</div>
<div class="container content">
    <div class="recommend-content row">
        <div class="col-md-6">
            <div id="carousel_home" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel_home" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel_home" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./assets/images/swiper_1.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>First slide label</h5>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./assets/images/swiper_2.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Second slide label</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 row flex-fill">
            <div class="col-md-6 row flex-column">
                <a href="#" class="card flex-fill " style="background-image: url(./assets/images/9.jpg)">
                    <div class="text">Hello World</div>
                </a>
                <a href="#" class="card flex-fill " style="background-image: url(./assets/images/9.jpg)">
                    <div class="text">Hello World</div>
                </a>
            </div>
            <div class="col-md-6 new-content">
                <div class="content-inner">
                    <div class="content-header clearfix">
                        <h3 class="float-left title">
                            最新资讯
                        </h3>
                        <a href="#" class="float-right">所有</a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <h3>一导航 WordPress 导航主题</h3>
                                <div class="clearfix">
                                    <span class="float-left">资讯</span>
                                    <span class="float-right">2020-01-15</span>
                                </div>
                            </li>

                            <li>
                                <h3>从牛顿、三体到混沌：科学认知如何从简单到复杂</h3>
                                <div class="clearfix">
                                    <span class="float-left">科技</span>
                                    <span class="float-right">2020-01-15</span>
                                </div>
                            </li>

                            <li>
                                <h3>黑洞捕手计划上线！LAMOST发现迄今最大的恒星级黑洞</h3>
                                <div class="clearfix">
                                    <span class="float-left">科技</span>
                                    <span class="float-right">2020-01-15</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="module-block">
        <div class="row">
            <c:forEach items="${listList}" var="a">
            <div class="col-xl-2">
                <div class="link-item">
                    <div class="image mr-3">
                        <img src="${a.icon}" alt="...">
                    </div>
                    <div class="link-body">
                        <h5 class="mt-0">${a.name}</h5>
                        <p>${a.description}</p>
                    </div>
                </div>
            </div>
            </c:forEach>
        </div>
    </div>
</div>
<!--引用jQuery及bootstrap.js-->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
